<template>
  <view class = "content">
    <image :src = "`${BASE_URL}/mine/hill.png`"
           style = "position: absolute;z-index:2;width: 250rpx;height: 200rpx;top: 20%;left: 50%;"></image>
    <image :src = "`${BASE_URL}/mine/tree.png`"
           style = "position: absolute;z-index: 2;width: 200rpx;height: 300rpx;top: 30%;left: 5%;"></image>
    <!--  顶部标题  -->
    <!--    <view class = "Tab">
          <view class = "TabLeft">
            <image :src = "`${BASE_URL}/mine/back.png`" style = "width: 60rpx;height: 60rpx;" @click = "back"></image>
          </view>
          <view class = "TabCenter">
            <view style = "font-size: 40rpx;font-weight: 400;margin-right: 50rpx">个人设置</view>
          </view>
        </view>-->
    <view class = "self_info">
      <image :src = "`${BASE_URL}/mine/head1.png`" style = "width: 230rpx;height: 230rpx;"></image>
      <view style = "font-size: 35rpx;font-weight: 500;">小新</view>
      <view class = "flex">
        <view>账号</view>
        <uni-easyinput placeholder = "请输入账号" inputBorder = "10"/>
      </view>
      <view class = "divider"></view>
      <view class = "flex">
        <view>昵称</view>
        <uni-easyinput placeholder = "请输入昵称" inputBorder = "10"/>
      </view>
      <view class = "divider"></view>
      <view class = "gender">
        <view>性别</view>
        <radio-group>
          <radio value = "male" color = "#4CD964" :checked = "gender === 'male'"/>
          <text style = "margin-right: 20rpx;">男</text>
          <radio value = "female" color = "#4CD964" :checked = "gender === 'female'"/>
          <text>女</text>
        </radio-group>
      </view>
      <view class = "divider"></view>
      <view class = "sign_self">
        <view>个性签名</view>
        <uni-easyinput type = "textarea" placeholder = "请输入个性签名" :inputBorder = "10" class = "input-field" style = "margin-left: 50rpx;" maxlength = "200"/>
      </view>
      <up-button style = "margin-top: 50rpx;width: 400rpx;background-color: rgba(122, 194, 64, 1);border-color: rgba(122, 194, 64, 1);" type = "success" @click = "login" class = "custom-btn">
        保存
      </up-button>
    </view>
  </view>
</template>

<script setup>
import {BASE_URL} from "../../../utils/api";

function back() {
  uni.switchTab({
    url: '/pages/mine/mine', success: (res) => {
      console.log("跳转成功");
    }, fail: (err) => {
      console.error("跳转失败", err);
    }
  });
}
</script>

<style lang = "scss" scoped>
.content {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: rgba(229, 237, 213, 1);
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.Tab {
  display: flex;
  height: 16vh;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.TabLeft {
  flex: 0.1;
  display: flex;
}

.TabCenter {
  flex: 0.9;
  display: flex;
  justify-content: center;

}

.self_info {
  display: flex;
  flex-direction: column;
  width: 80%;
  height: 90%;
  align-items: center;
  z-index: 10;
  gap: 35rpx;
}

.flex {
  display: flex;
  width: 70%;
  height: auto;
  justify-content: center;
  align-items: center;
  gap: 20rpx;
}

.divider {
  width: 100%;
  border-bottom: 2rpx solid #ccc;
}

.gender {
  display: flex;
  width: 70%;
  gap: 20rpx;
  align-items: center;
}

.sign_self {
  display: flex;
  flex-direction: column;
  width: 70%;
  gap: 20rpx;
}

.input-field {
  display: inline-block;
  width: calc(100% - 60rpx);
}
</style>